<html>
<head>

<!-- For use in Facebook -->
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.8.11.custom.css" />
<link rel="stylesheet" type="text/css" href="../css/jquery-ui.override.css" />
<link rel="stylesheet" type="text/css" href="../css/multiColumn.css" />
<link rel="stylesheet" type="text/css" href="../css/screen.css" />
<link rel="stylesheet" href="../css/menu_style.css" type="text/css" media="all" />
<script type="text/javascript" src="../js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="../js/jquery.quicksand.js"></script>
<script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../js/jquery.ezpz_tooltip.js"></script>

<script type="text/javascript"><!--

var sIDs = [];
var cnt = 0;

function updateCardClickBinding()
{
	$('.item').click(
		function()
		{
			var thisElement = $(this);
			
			var storeitemid = thisElement.attr('id');
			var itemImage = thisElement.find('.itemImg img').attr('src');
			var itemDesc = thisElement.find('.itemDesc').text();
			var itemName = thisElement.find('.fullName').text();
			var currentPoints = $('.col2').find('#userpoints').text();
			var currentPrice = thisElement.find('.numPrice').text();
			var dialog = $(''.concat(
				'<div class="storePopup">',
					'<div id="popheader">',
					'<div class="popmask poprightmenu">',
						'<div class="headleft">',
								'<div class="head1">',
									'<div class="popitemImg">',
										'<img src="', itemImage, '"/>',
									'</div>',
								'</div>',
								'<div class="head2">',
									'<div class="popitemName">',
										itemName,
									'</div>',
									'<div class="popitemDesc">',
										itemDesc,
									'</div>',
									'<div class="itemIncludes">',
										'<div class="popitemName">',
										'Purchase Contains:',
										'</div>',
										'<center>',
										'<div class = "includedCardList">',
										'Loading Cards...',
										'</div>',
										'</center>',
									'</div>',
								'</div>',
							'</div>',
						'</div>',
						'</div>',
					'<div class="popmask poprightmenu">',
							'<div class="popleft">',
								'<div class="pop1">',
								currentPoints,
								'<br>-',
								currentPrice,
								'<br>=',
								currentPoints-currentPrice,
									'<div>',
										'<button class="purchaseButton" value="Purchase">Purchase With Untold<br>Points</button>',
									'</div>',
								'</div>',
								'<div class="pop2">',
								'Facebook Credits Are not Available to use at this time',
									'<div>',
										'<button class="purchaseButtonFacebook" value="Purchase" disabled="disabled">Purchase With Facebook Credits</button>',
									'</div>',								
								'<div>',
							'</div>',

					'</div>',
				'</div>'
				
			));
			
			dialog.find('.includedCardList').load("../ajax/getStoreItemCardList.php", { storeitemid: storeitemid });
			
			dialog.find('.purchaseButtonFacebook').click(function() {
				// TODO: Add purchasing with facebook credits here
			});
			
			dialog.find('.purchaseButton').click(function() {
				dialog.dialog('close').remove();
				$.post
				(
					"../ajax/tryPurchase.php",
					{ "storeitemid": storeitemid },
					function (result)
					{
						if (result.success)
							$('#userpoints').text(result.current_points);
						else
							$('#message').text(result.message);
					},
					'json'
				);
			});
			
			dialog.dialog({
				modal:true,
				resizable:false,
				draggable:false,
				width: 588
			});
			
		}
	).mousedown(
		function() { isClicking = true; }
	).mousemove(
		function() { isClicking = false; }
	);
}



function loadCards(options)
{
	//Update user points
	$.post("../ajax/getUserPoints.php", "", function(data){	document.getElementById('userpoints').innerHTML = data; });

	if (options === undefined || options === null)
		options = {};

	var link = "../ajax/getStoreList.php?";
	if (form.cardname.value && form.cardname.value != "Item name")
		options.name_filter = form.cardname.value;
	
	var oldCards = $('.items');
	$.post(
		link,
		options,
		function(data)
		{
			var newCards = $(data);
			newCards.attr('hidden', 'true');
			oldCards.quicksand
			(
				newCards.children('.item'),
				{
					duration: 700,
					attribute: 'id',
					easing: 'easeInOutQuad'
				},
				function()
				{
					//$(".itemImg").ezpz_tooltip({contentId:"example-content-1"});
					//oldCards.selectable();
					//oldCards.sortable({
					//	delay: 1000
					//});
				/*	oldCards.selectable({
						stop: function() {
							var result = $( "#select-result" ).empty();
								$( ".ui-selected.item", this ).each(function( ) {
							var index = $( this ).attr('id');
								result.append( " #" + ( index) );
							
							sIDs[cnt] = index;
							cnt = cnt +1;
				});
							var j = 0;
							var toSend = "";
							for(j=0;j<sIDs.length;j++)
							{
								toSend = toSend + "~" + sIDs[j];
							}
							cnt = 0;
			}
		});*/
					updateCardClickBinding();
				}
			);
		},
		'html'
	);
}


$(function() {	
	$('.search').click(function(e) {
		loadCards();
		e.preventDefault();
	});
	loadCards();
});



function keyPressed(e) {
    var keycode;
    if (window.event) {
        keycode = window.event.keyCode;
    }
    else if (e) {
        keycode = e.which;
    }
    else {
        return (false);
    }
	if(keycode == 13)
		loadCards();
    return (keycode != 13);
}

function onPurchase()
{
	var id = $(".ui-selected").attr("id");
	if (id)
	{
		$.post
		(
			"../ajax/tryPurchase.php",
			{ storeitemid: id },
			function (result)
			{
				
			}
		);
	}
}

--></script>
</head>
<body>


<div id="header"> 
	<img src="../images/newbannertest.png"></img>
</div>
<div class="colmask leftmenu"> 
    <div class="colright"> 
        <div class="col1wrap"> 
				<div class="col1">
				<div class="itemList">
					<ul class="items">
					</ul>
				</div>
			</div>
		</div>

		<div class="col2">
			<form name="form">
				<input type="text" onfocus="$(this).val('')" name="cardname" onkeypress="return keyPressed(event)" value = "<?php if($_GET["cardname"])echo $_GET["cardname"]; else echo "Item name"; ?>"/> 
				<br /> 
				<p> <a class="search" href="#dummy"> Search </a> </p>
			</form>
			
			<span class="error" id="message"></span>
			
			<br/>
			Your Points: <span id="userpoints">0</span>
			<!--<form name ="passing" action="../ajax/purchase.php" method="post">
				<input align="center" type="submit" value="Purchase" />
				
				<span id="userpoints">none</span>
				<script type="text/javascript">
				</script>
				<input type="hidden" name="formvar" value ="" />
			</form>-->
		</div>
	</div>
	<div>

	


	</div>	
	<div>
		<div id="example-content-1">Tooltip content</div>
		
	</div> 
	
	<div id="dock">
		<ul id='menu'>
			<li class="button"><a href='../home.php/' >Home</a></li>
			<li class="button"><a href='../myCollection.php/'  >My Collection</a></li>
			<li class="button"><a class='current' href='../store.php/'  >Store</a></li>
			<li class="button"><a href='../tradeHome.php/'  >Trading</a></li>
			<li class="button"><a href='http://www.untoldthegame.com/forum'  target="_blank">Forums</a></li>
			<li class="button"><a href='http://'  >Character Builder</a></li>
						<li class="button"><a href='../help/I3_toc.php/'  target="_blank">Help</a></li>
		</ul>
	</div><!-- End of Nav Div -->
</div>

</body>
</html>


 